<template>
  <div>
    <el-upload
      class="upload-demo"
      action="upload-url-demo"
      :on-preview="handlePreview"
      :before-remove="beforeRemove"
      :limit="data.limit"
      :on-exceed="handleExceed"
      :http-request="myFuncUpload"
      :file-list="fileList"
      list-type="picture-card"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        {{data.tips}}
      </div>
    </el-upload>
    <!-- 预览 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="80vw"
      :modal-append-to-body="true"
      append-to-body
      @close="closeFnc"
    >
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [],
      dialogVisible: false,
      dialogImageUrl: "",
    };
  },
  props: ["data"],
  mounted() {},
  methods: {
    myFuncUpload(response) {
      console.log(this.data.num);
      let formFile = new FormData();
      let imgName = "file";
      formFile.append(imgName, response.file);
      this.$api
        .uploadFile(formFile)
        .then((res) => {
          if (res.code == 101) {
            this.$emit("reUrlData", res.data);
            this.fileList.push({ name: imgName, url: res.data });
            console.log("this.fileList", this.fileList);
          }
        })
        .catch((err) => {});
    },
    // 上传超出提示
    handleExceed(files, fileList) {
      console.log("fileList", fileList);
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    // 移除
    beforeRemove(file, fileList) {
      this.$confirm(`确定移除该图片吗？`).then(() => {
        this.fileList.pop();
        this.$emit("reUrlData", "");
        return true;
      });
      return false;
    },
    // 预览
    handlePreview(file) {
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
    },
    // 关闭预览
    closeFnc() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang='stylus' scoped>
body {
}
</style>
